<template>
  <div class="translation-page">
    <van-nav-bar
      title="语言翻译"
      left-text="返回"
      left-arrow
      @click-left="$router.go(-1)"
      class="custom-nav-bar"
    />

    <div class="feature-intro">
      <div class="intro-content">
        <div class="intro-icon">🌐</div>
        <div class="intro-text">
          <h3>AI智能翻译{{ currentMode ? ` - ${currentMode}` : '' }}</h3>
          <p>多语言即时翻译，准确流畅</p>
        </div>
      </div>

      <!-- 翻译类型标签 -->
      <div class="translation-tabs">
        <div class="mode-title">选择翻译类型：</div>
        <div class="tabs-container">
          <div
            v-for="mode in translationModes"
            :key="mode.name"
            :class="['mode-tab', { active: currentMode === mode.name }]"
            @click="selectMode(mode)"
          >
            <span class="tab-icon">{{ mode.icon }}</span>
            <span class="tab-name">{{ mode.name }}</span>
          </div>
        </div>
      </div>

      <!-- 示例翻译 -->
      <div class="intro-examples" v-if="currentMode">
        <div class="example-title">💡 试试这些{{ currentMode }}：</div>
        <div class="example-tags">
          <span
            v-for="example in currentExamples"
            :key="example"
            class="example-tag"
            @click="setExample(example)"
          >
            {{ example }}
          </span>
        </div>
      </div>
    </div>

    <div class="translation-container">
      <div class="input-section">
        <van-field
          v-model="inputText"
          placeholder="请输入要翻译的文本..."
          type="textarea"
          rows="4"
          autosize
        />
        <div class="language-selector">
          <van-button size="small" @click="swapLanguages">
            {{ fromLang }} → {{ toLang }} 🔄
          </van-button>
        </div>
        <van-button
          type="primary"
          block
          :loading="isLoading"
          @click="translate"
          :disabled="!inputText.trim()"
        >
          翻译
        </van-button>
      </div>

      <!-- 智能功能 -->
      <div class="smart-features">
        <div class="feature-item" @click="showQuickTranslations">
          <van-icon name="chat-o" />
          <span>常用翻译</span>
        </div>
        <div class="feature-item" @click="showTranslationHistory">
          <van-icon name="clock-o" />
          <span>翻译历史</span>
        </div>
        <div class="feature-item" @click="toggleDarkMode">
          <van-icon :name="isDarkMode ? 'sun-o' : 'moon-o'" />
          <span>{{ isDarkMode ? '浅色' : '深色' }}</span>
        </div>
        <div class="feature-item" @click="exportTranslations">
          <van-icon name="down" />
          <span>导出记录</span>
        </div>
      </div>

      <div v-if="result" class="result-section">
        <div class="result-text">{{ result }}</div>
        <div class="result-actions">
          <van-button size="small" @click="copyResult">复制结果</van-button>
          <van-button size="small" @click="speakResult">朗读</van-button>
          <van-button size="small" @click="saveTranslation">保存</van-button>
        </div>
      </div>
    </div>

    <!-- 常用翻译弹窗 -->
    <van-popup v-model:show="showQuickPopup" position="bottom" :style="{ height: '70%' }">
      <div class="quick-popup">
        <div class="popup-header">
          <h3>常用翻译</h3>
          <van-button size="small" @click="showQuickPopup = false">关闭</van-button>
        </div>
        <div class="popup-content">
          <div class="category-tabs">
            <div
              v-for="category in quickCategories"
              :key="category.name"
              :class="['category-tab', { active: activeQuickCategory === category.name }]"
              @click="activeQuickCategory = category.name"
            >
              {{ category.icon }} {{ category.name }}
            </div>
          </div>
          <div class="quick-phrases">
            <div
              v-for="phrase in currentQuickPhrases"
              :key="phrase.text"
              class="phrase-item"
              @click="selectQuickPhrase(phrase)"
            >
              <div class="phrase-text">{{ phrase.text }}</div>
              <div class="phrase-translation">{{ phrase.translation }}</div>
            </div>
          </div>
        </div>
      </div>
    </van-popup>

    <!-- 翻译历史弹窗 -->
    <van-popup v-model:show="showHistoryPopup" position="bottom" :style="{ height: '60%' }">
      <div class="history-popup">
        <div class="popup-header">
          <h3>翻译历史</h3>
          <div class="header-actions">
            <van-button size="small" @click="clearTranslationHistory">清空</van-button>
            <van-button size="small" @click="showHistoryPopup = false">关闭</van-button>
          </div>
        </div>
        <div class="popup-content">
          <div v-if="translationHistory.length === 0" class="empty-history">
            <div class="empty-icon">🌐</div>
            <p>暂无翻译历史</p>
          </div>
          <div v-else class="history-list">
            <div
              v-for="(item, index) in translationHistory"
              :key="index"
              class="history-item"
              @click="selectHistoryItem(item)"
            >
              <div class="history-content">
                <div class="history-original">{{ item.original }}</div>
                <div class="history-translation">{{ item.translation }}</div>
                <div class="history-meta">
                  <span class="history-lang">{{ item.fromLang }} → {{ item.toLang }}</span>
                  <span class="history-time">{{ formatTime(item.timestamp) }}</span>
                </div>
              </div>
              <van-icon name="arrow" />
            </div>
          </div>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { showToast } from 'vant'
import { useRoute } from 'vue-router'
import aiService from '@/services/aiService'
import { saveUserData, loadUserData, getCurrentUserId, migrateOldData } from '@/utils/userDataManager'

const route = useRoute()

const inputText = ref('')
const result = ref('')
const isLoading = ref(false)
const fromLang = ref('中文')
const toLang = ref('英文')
const currentMode = ref<string>('')

// 翻译模式配置
const translationModes = ref([
  {
    name: '中英互译',
    icon: '🇨🇳🇺🇸',
    description: '中英文精准翻译',
    examples: ['我喜欢学习编程', 'Hello, how are you?', '今天天气很好', 'Thank you very much']
  },
  {
    name: '多语种翻译',
    icon: '🌍',
    description: '支持多种语言翻译',
    examples: ['Bonjour (法语)', 'こんにちは (日语)', 'Hola (西班牙语)', 'Guten Tag (德语)']
  },
  {
    name: '文档翻译',
    icon: '📄',
    description: '整篇文档翻译服务',
    examples: ['翻译这份合同', '翻译学术论文', '翻译技术文档', '翻译新闻报道']
  },
  {
    name: '口语翻译',
    icon: '💬',
    description: '日常口语表达翻译',
    examples: ['你好吗？', '谢谢你的帮助', '我想要一杯咖啡', '请问洗手间在哪里？']
  },
  {
    name: '专业术语',
    icon: '🔬',
    description: '专业领域术语翻译',
    examples: ['人工智能', '机器学习', '深度学习', '神经网络']
  }
])

// 当前示例
const currentExamples = computed(() => {
  if (!currentMode.value) return []
  const mode = translationModes.value.find(m => m.name === currentMode.value)
  return mode ? mode.examples : []
})

// 选择模式
const selectMode = (mode: any) => {
  currentMode.value = mode.name
  showToast(`已切换到${mode.name}模式`)
}

// 设置示例
const setExample = (example: string) => {
  inputText.value = example
}

// 新增功能状态
const showQuickPopup = ref(false)
const showHistoryPopup = ref(false)
const activeQuickCategory = ref('日常')
const isDarkMode = ref(false)

// 本地存储功能
const translationHistory = ref<Array<{original: string, translation: string, fromLang: string, toLang: string, timestamp: number}>>([])

// 常用翻译分类
const quickCategories = ref([
  {
    name: '日常',
    icon: '🏠',
    phrases: [
      { text: '你好', translation: 'Hello' },
      { text: '谢谢', translation: 'Thank you' },
      { text: '再见', translation: 'Goodbye' },
      { text: '对不起', translation: 'Sorry' },
      { text: '请问', translation: 'Excuse me' }
    ]
  },
  {
    name: '商务',
    icon: '💼',
    phrases: [
      { text: '会议', translation: 'Meeting' },
      { text: '合同', translation: 'Contract' },
      { text: '项目', translation: 'Project' },
      { text: '预算', translation: 'Budget' },
      { text: '截止日期', translation: 'Deadline' }
    ]
  },
  {
    name: '旅游',
    icon: '✈️',
    phrases: [
      { text: '机场', translation: 'Airport' },
      { text: '酒店', translation: 'Hotel' },
      { text: '餐厅', translation: 'Restaurant' },
      { text: '地图', translation: 'Map' },
      { text: '帮助', translation: 'Help' }
    ]
  },
  {
    name: '学习',
    icon: '📚',
    phrases: [
      { text: '学校', translation: 'School' },
      { text: '老师', translation: 'Teacher' },
      { text: '学生', translation: 'Student' },
      { text: '课程', translation: 'Course' },
      { text: '考试', translation: 'Exam' }
    ]
  }
])

// 当前常用短语
const currentQuickPhrases = computed(() => {
  const category = quickCategories.value.find(c => c.name === activeQuickCategory.value)
  return category ? category.phrases : []
})

// 从本地存储加载数据
const loadLocalData = () => {
  try {
    const userId = getCurrentUserId()
    if (!userId) {
      console.warn('⚠️ 用户未登录，无法加载个人数据')
      return
    }

    // 迁移旧数据（如果存在）
    migrateOldData('translation', [
      { oldKey: 'translation_history', dataType: 'history' },
      { oldKey: 'translation_darkMode', dataType: 'darkMode' }
    ])

    // 加载用户专属数据
    translationHistory.value = loadUserData('translation', 'history', [])
    isDarkMode.value = loadUserData('translation', 'darkMode', false)

    // 应用深色模式
    document.documentElement.classList.toggle('dark-mode', isDarkMode.value)

    console.log(`✅ 语言翻译数据已加载 - 用户ID: ${userId}`)
  } catch (error) {
    console.error('❌ 加载本地数据失败:', error)
  }
}

// 保存到本地存储
const saveToLocal = (key: string, data: any) => {
  const success = saveUserData('translation', key, data)
  if (!success) {
    console.warn('⚠️ 保存数据失败，用户可能未登录')
  }
}

// 显示常用翻译
const showQuickTranslations = () => {
  showQuickPopup.value = true
}

// 选择常用短语
const selectQuickPhrase = (phrase: any) => {
  inputText.value = phrase.text
  result.value = phrase.translation
  showQuickPopup.value = false
}

// 显示翻译历史
const showTranslationHistory = () => {
  showHistoryPopup.value = true
}

// 选择历史项目
const selectHistoryItem = (item: any) => {
  inputText.value = item.original
  result.value = item.translation
  fromLang.value = item.fromLang
  toLang.value = item.toLang
  showHistoryPopup.value = false
}

// 清空翻译历史
const clearTranslationHistory = () => {
  translationHistory.value = []
  saveToLocal('history', translationHistory.value)
  showToast('翻译历史已清空')
}

// 切换深色模式
const toggleDarkMode = () => {
  isDarkMode.value = !isDarkMode.value
  document.documentElement.classList.toggle('dark-mode', isDarkMode.value)
  saveToLocal('darkMode', isDarkMode.value)
  showToast(isDarkMode.value ? '已切换到深色模式' : '已切换到浅色模式')
}

// 导出翻译记录
const exportTranslations = () => {
  if (translationHistory.value.length === 0) {
    showToast('暂无翻译记录可导出')
    return
  }

  const content = translationHistory.value.map(item => {
    const time = new Date(item.timestamp).toLocaleString()
    return `[${time}] ${item.fromLang} → ${item.toLang}\n原文: ${item.original}\n译文: ${item.translation}`
  }).join('\n\n' + '='.repeat(50) + '\n\n')

  const blob = new Blob([content], { type: 'text/plain;charset=utf-8' })
  const url = URL.createObjectURL(blob)
  const a = document.createElement('a')
  a.href = url
  a.download = `翻译记录-${new Date().toLocaleDateString()}.txt`
  document.body.appendChild(a)
  a.click()
  document.body.removeChild(a)
  URL.revokeObjectURL(url)

  showToast('翻译记录已导出到文件')
}

// 朗读结果
const speakResult = () => {
  if ('speechSynthesis' in window && result.value) {
    const utterance = new SpeechSynthesisUtterance(result.value)
    utterance.lang = toLang.value === '英文' ? 'en-US' : 'zh-CN'
    speechSynthesis.speak(utterance)
    showToast('开始朗读')
  } else {
    showToast('浏览器不支持语音朗读')
  }
}

// 保存翻译
const saveTranslation = () => {
  if (inputText.value && result.value) {
    const newTranslation = {
      original: inputText.value,
      translation: result.value,
      fromLang: fromLang.value,
      toLang: toLang.value,
      timestamp: Date.now()
    }

    translationHistory.value.unshift(newTranslation)
    if (translationHistory.value.length > 50) {
      translationHistory.value = translationHistory.value.slice(0, 50)
    }
    saveToLocal('history', translationHistory.value)
    showToast('翻译已保存到历史记录')
  }
}

// 格式化时间
const formatTime = (timestamp: number) => {
  const now = Date.now()
  const diff = now - timestamp

  if (diff < 1000 * 60) {
    return '刚刚'
  } else if (diff < 1000 * 60 * 60) {
    return `${Math.floor(diff / (1000 * 60))}分钟前`
  } else if (diff < 1000 * 60 * 60 * 24) {
    return `${Math.floor(diff / (1000 * 60 * 60))}小时前`
  } else {
    return new Date(timestamp).toLocaleDateString()
  }
}

const translate = async () => {
  if (!inputText.value.trim()) return

  isLoading.value = true
  result.value = '' // 清空之前的结果
  let accumulatedText = ''

  try {
    console.log('🚀 开始流式翻译:', inputText.value, `${fromLang.value} -> ${toLang.value}`)

    // 尝试流式翻译
    await aiService.translationStream(
      12345,
      inputText.value,
      fromLang.value,
      toLang.value,
      // onMessage回调
      (content: string) => {
        console.log('📝 收到翻译内容:', content)
        accumulatedText += content
        result.value = accumulatedText
      },
      // onComplete回调
      () => {
        console.log('✅ 流式翻译完成')
        // 自动保存到历史记录
        saveTranslation()
        isLoading.value = false
      },
      // onError回调
      async (error: any) => {
        console.error('❌ 流式翻译失败，尝试非流式翻译:', error)

        // 流式翻译失败，尝试非流式翻译
        try {
          const response = await aiService.translation(12345, inputText.value, fromLang.value, toLang.value)
          console.log('📊 非流式翻译响应:', response)

          if (response && response.code === 200) {
            // 智能解析数据格式
            let content = ''
            if (response.data) {
              if (typeof response.data === 'string') {
                content = response.data
              } else if (response.data.response) {
                content = response.data.response
              } else if (response.data.content) {
                content = response.data.content
              } else if (response.data.translation) {
                content = response.data.translation
              } else {
                content = JSON.stringify(response.data, null, 2)
              }
            }

            result.value = content || '翻译完成，但没有返回具体内容。'
            // 自动保存到历史记录
            saveTranslation()
          } else {
            result.value = `翻译失败: ${response?.message || '未知错误'}`
            showToast('翻译失败')
          }
        } catch (fallbackError) {
          console.error('❌ 非流式翻译也失败:', fallbackError)
          result.value = `网络错误: ${fallbackError.message || fallbackError}`
          showToast('翻译失败')
        }

        isLoading.value = false
      }
    )

  } catch (error) {
    console.error('❌ 翻译异常:', error)

    // 备选方案：直接调用非流式API
    try {
      const response = await aiService.translation(12345, inputText.value, fromLang.value, toLang.value)
      console.log('📊 备选翻译响应:', response)

      if (response && response.code === 200) {
        let content = ''
        if (response.data) {
          if (typeof response.data === 'string') {
            content = response.data
          } else if (response.data.response) {
            content = response.data.response
          } else if (response.data.content) {
            content = response.data.content
          } else if (response.data.translation) {
            content = response.data.translation
          } else {
            content = JSON.stringify(response.data, null, 2)
          }
        }

        result.value = content || '翻译完成，但没有返回具体内容。'
        saveTranslation()
      } else {
        result.value = `翻译失败: ${response?.message || '未知错误'}`
        showToast('翻译失败')
      }
    } catch (fallbackError) {
      console.error('❌ 备选翻译失败:', fallbackError)
      result.value = `最终错误: ${fallbackError.message || fallbackError}`
      showToast('翻译失败')
    }

    isLoading.value = false
  }
}

// 已删除模拟数据生成函数，现在使用真实API

const swapLanguages = () => {
  [fromLang.value, toLang.value] = [toLang.value, fromLang.value]
}

const copyResult = async () => {
  try {
    await navigator.clipboard.writeText(result.value)
    showToast('已复制')
  } catch {
    showToast('复制失败')
  }
}

onMounted(() => {
  // 加载本地数据
  loadLocalData()

  // 检查路由参数中的模式
  const routeMode = route.query.mode as string
  if (routeMode) {
    const mode = translationModes.value.find(m => m.name === routeMode)
    if (mode) {
      currentMode.value = routeMode
    }
  } else {
    // 默认选择第一个模式
    currentMode.value = translationModes.value[0].name
  }
})
</script>

<style scoped>
.translation-page {
  min-height: 100vh;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}

.custom-nav-bar {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.feature-intro {
  margin: 16px;
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.intro-content {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}

.intro-icon {
  font-size: 40px;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f8fafc;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
}

.intro-text h3 {
  font-size: 20px;
  font-weight: 600;
  color: #1e293b;
  margin: 0 0 8px 0;
}

.intro-text p {
  font-size: 14px;
  color: #64748b;
  margin: 0;
  line-height: 1.4;
}

/* 翻译标签页样式 */
.translation-tabs {
  margin-top: 16px;
}

.mode-title {
  font-size: 14px;
  font-weight: 600;
  color: #1e293b;
  margin-bottom: 12px;
}

.tabs-container {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 4px;
  background: #f8fafc;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
}

.mode-tab {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  background: transparent;
  color: #64748b;
  font-size: 13px;
  font-weight: 500;
  min-width: 0;
  flex: 1;
  justify-content: center;
}

.mode-tab:hover {
  background: rgba(59, 130, 246, 0.1);
  color: #3b82f6;
}

.mode-tab.active {
  background: #3b82f6;
  color: white;
  box-shadow: 0 2px 4px rgba(59, 130, 246, 0.3);
}

.tab-icon {
  font-size: 14px;
}

.tab-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.intro-examples {
  margin-top: 16px;
}

.example-title {
  font-size: 14px;
  font-weight: 600;
  color: #1e293b;
  margin-bottom: 12px;
}

.example-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.example-tag {
  background: #f1f5f9;
  color: #475569;
  padding: 8px 12px;
  border-radius: 16px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid #e2e8f0;
}

.example-tag:hover {
  background: rgba(59, 130, 246, 0.2);
  transform: translateY(-2px);
}

.custom-nav-bar {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
}

.feature-intro {
  margin: 16px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 16px;
  padding: 20px;
  backdrop-filter: blur(10px);
}

.intro-content {
  display: flex;
  align-items: center;
  gap: 16px;
}

.intro-icon {
  font-size: 40px;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(241, 39, 17, 0.1);
  border-radius: 16px;
}

.intro-text h3 {
  font-size: 20px;
  font-weight: 600;
  color: #2c3e50;
  margin: 0 0 8px 0;
}

.intro-text p {
  font-size: 14px;
  color: #7f8c8d;
  margin: 0;
}

.translation-container {
  padding: 16px;
}

.input-section {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 16px;
}

.language-selector {
  text-align: center;
  margin: 16px 0;
}

.result-section {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 16px;
  padding: 20px;
}

.result-text {
  font-size: 16px;
  line-height: 1.5;
  margin-bottom: 16px;
  padding: 16px;
  background: #f8f9fa;
  border-radius: 12px;
}

.result-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* 智能功能区域样式 */
.smart-features {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 16px;
}

.feature-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 8px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 12px;
  color: #64748b;
}

.feature-item:hover {
  background: #e0f2fe;
  border-color: #0ea5e9;
  color: #0ea5e9;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(14, 165, 233, 0.2);
}

.feature-item .van-icon {
  font-size: 18px;
}

/* 弹窗样式 */
.quick-popup,
.history-popup {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: white;
}

.popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  border-bottom: 1px solid #e2e8f0;
  background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 100%);
}

.popup-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #1e293b;
}

.header-actions {
  display: flex;
  gap: 8px;
}

.popup-content {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  background: #f8fafc;
}

.category-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.category-tab {
  padding: 8px 16px;
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
  font-size: 14px;
  color: #64748b;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.category-tab:hover {
  border-color: #0ea5e9;
  background: #e0f2fe;
  transform: translateY(-1px);
}

.category-tab.active {
  background: linear-gradient(135deg, #0ea5e9 0%, #06b6d4 100%);
  border-color: #0ea5e9;
  color: white;
  box-shadow: 0 4px 12px rgba(14, 165, 233, 0.3);
}

.quick-phrases {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.phrase-item {
  padding: 12px 16px;
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.phrase-item:hover {
  background: #e0f2fe;
  border-color: #0ea5e9;
  transform: translateX(4px);
  box-shadow: 0 4px 12px rgba(14, 165, 233, 0.2);
}

.phrase-text {
  font-size: 14px;
  color: #374151;
  font-weight: 500;
  margin-bottom: 4px;
}

.phrase-translation {
  font-size: 13px;
  color: #64748b;
}

/* 历史记录样式 */
.empty-history {
  text-align: center;
  padding: 40px 20px;
  color: #64748b;
}

.empty-icon {
  font-size: 48px;
  margin-bottom: 16px;
}

.history-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.history-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.history-item:hover {
  background: #e0f2fe;
  border-color: #0ea5e9;
  transform: translateX(4px);
  box-shadow: 0 4px 12px rgba(14, 165, 233, 0.2);
}

.history-content {
  flex: 1;
}

.history-original {
  font-size: 14px;
  color: #374151;
  font-weight: 500;
  margin-bottom: 4px;
}

.history-translation {
  font-size: 13px;
  color: #64748b;
  margin-bottom: 6px;
}

.history-meta {
  display: flex;
  gap: 12px;
  font-size: 12px;
  color: #94a3b8;
}

/* 深色模式支持 */
:global(.dark-mode) .translation-page {
  background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
}

:global(.dark-mode) .custom-nav-bar {
  background: rgba(30, 41, 59, 0.95);
  color: white;
}

:global(.dark-mode) .feature-intro {
  background: #334155;
  border-color: #475569;
}

:global(.dark-mode) .intro-text h3 {
  color: #f1f5f9;
}

:global(.dark-mode) .intro-text p {
  color: #cbd5e1;
}

:global(.dark-mode) .input-section,
:global(.dark-mode) .result-section {
  background: rgba(51, 65, 85, 0.95);
  border-color: #475569;
}

:global(.dark-mode) .feature-item {
  background: rgba(71, 85, 105, 0.9);
  border-color: #64748b;
  color: #cbd5e1;
}

:global(.dark-mode) .feature-item:hover {
  background: #0c4a6e;
  border-color: #0ea5e9;
  color: white;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .smart-features {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .feature-item {
    padding: 16px 12px;
  }

  .category-tabs {
    gap: 6px;
  }

  .category-tab {
    padding: 6px 12px;
    font-size: 13px;
  }

  .result-actions {
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .smart-features {
    grid-template-columns: repeat(2, 1fr);
  }

  .feature-item {
    font-size: 11px;
    padding: 10px 6px;
  }

  .header-actions {
    flex-direction: column;
    gap: 4px;
  }
}
</style>
